<template>
    <div class="container">
        <a-card class="searchForm mb-twelve">
            <a-form-model :model="searchForm" layout="inline" :colon="false">
                <a-form-model-item label="终端名称" prop="terminalName">
                    <a-input style="color: #000" v-model="searchForm.sensor_name" placeholder="请输入终端名称" />
                </a-form-model-item>
                <a-form-model-item label="终端类型" prop="terminalType">
                    <a-select v-model="searchForm.sensor_type" placeholder="请选择" allowClear style="width:180px;">
                        <a-select-option v-for="item in terminalTypeList" :value="item.id" :key="item.id">
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="终端型号" prop="sensor_mode">
                  <a-input style="color: #000" v-model="searchForm.sensor_mode" placeholder="请输入终端型号" />
                </a-form-model-item>
                <a-form-model-item label="终端号码" prop="sensor_sn">
                    <a-input style="color: #000" v-model="searchForm.sensor_sn" placeholder="请输入终端号码" />
                </a-form-model-item>
                <a-form-model-item label="状态" prop="online_status">
                    <a-select v-model="searchForm.online_status" placeholder="请选择" allowClear style="width:180px">
                        <a-select-option v-for="(item, index) in statusList" :value="item.id" :key="index">
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="search" type="primary">查询</a-button>
                    <a-button @click="reset" class="btn-reset">重置</a-button>
                </a-form-model-item>
            </a-form-model>
        </a-card>
        <a-card>
            <div class="flex align-center justify-between flex-wrap card-hr">
                <div class="a-card-title">终端列表</div>
                <div>
                    <a-button type="danger" @click="del(null)" class="btn-danger">批量删除</a-button>
                    <a-button @click="handleOpen('')" type="primary" style="margin-left: 8px;">添加</a-button>
                </div>
            </div>
            <div class="mb-sixteen pagesList">
                <a-table bordered :rowKey="(record, index) => {
                return index;
            }
                " :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
                    :data-source="list" :loading="loading" :pagination="false" :scroll="{ x: '100%' }">
                    <template slot="sensor_type" slot-scope="text,record">
                        <div v-if="record.sensor_type=='FYH04'">04型-云盒</div>
                        <div v-else-if="record.sensor_type=='FYH05'">05型-云盒</div>
                        <div v-else-if="record.sensor_type=='FYH06'">06型-云盒</div>
                        <div v-else>{{ record.sensor_type }}</div>
                    </template>
                  <template slot="online_status" slot-scope="text,record">
                    <div v-if="record.online_status==0">离线</div>
                    <div v-else style="color: #167ddc">在线</div>
                  </template>
                  <template slot="action" slot-scope="text,record">
                        <a-button @click="handleOpen(record)" type="link"> 编辑 </a-button>
                        <a-button @click="del(record)" type="link" style="color: #F64646;"> 删除 </a-button>
                    </template>
                </a-table>

            </div>
            <div class="text-right" v-if="total > 0">
                <a-pagination :total="total" :current="searchForm.page" :page-size.sync="searchForm.pageSize"
                    :page-size-options="$pageSizeOptions" @change="handlePageNo" @showSizeChange="showSizeChange"
                    show-size-changer />
            </div>
        </a-card>

        <a-modal :title="title" v-model="visible" :maskClosable="false" :width="830" centered :footer="null">
            <div>
                <a-form-model ref="ruleForm" :model="form" :rules="rules" :colon="false" :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 16 }">
                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-model-item label="ID" prop="id">
                                <a-input v-model="form.id" placeholder="ID" disabled />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="终端编码" prop="sensor_code">
                                <a-input v-model="form.sensor_code" placeholder="请输入终端编码" />
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                  <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-model-item label="终端名称" prop="sensor_mode">
                                <a-input v-model="form.sensor_mode" placeholder="请输入终端名称" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="终端号码" prop="sensor_sn">
                                <a-input v-model="form.sensor_sn" placeholder="请输入终端号码" />
                            </a-form-model-item>
                        </a-col>
                  </a-row>
                  <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-model-item label="终端类型" prop="sensor_type">
                                <a-select v-model="form.sensor_type" placeholder="请选择终端类型" allowClear style="width:100%">
                                    <a-select-option v-for="(item, index) in terminalTypeList" :value="item.id" :key="index">
                                        {{ item.name }}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="终端型号" prop="sensor_mode">
                              <a-input v-model="form.sensor_mode" placeholder="请输入终端型号" />
<!--                                <a-select v-model="form.sensor_mode" placeholder="请选择终端型号" allowClear style="width:100%">-->
<!--                                    <a-select-option v-for="(item, index) in terminalModelList" :value="item.id" :key="index">-->
<!--                                        {{ item.name }}-->
<!--                                    </a-select-option>-->
<!--                                </a-select>-->
                            </a-form-model-item>
                        </a-col>
                  </a-row>
                  <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-model-item label="订阅主题" prop="sensor_subscribe">
                                <a-input v-model="form.sensor_subscribe" placeholder="请输入订阅主题" />
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="发布主题" prop="sensor_topic">
                              <a-input v-model="form.sensor_topic" placeholder="请输入发布主题" />
<!--                                <a-select v-model="form.publishTopic" placeholder="请选择发布主题" allowClear style="width:100%">-->
<!--                                    <a-select-option v-for="(item, index) in publishTopicList" :value="item.id" :key="index">-->
<!--                                        {{ item.name }}-->
<!--                                    </a-select-option>-->
<!--                                </a-select>-->
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <div class="mb-sixteen modalcss">
                        <a-table bordered :rowKey="(record, index) => { return index; }" :columns="columnsModal"
                                :data-source="dataSourceModal" :pagination="false" :scroll="{ x: '100%' }">
                                <template slot="configuration" slot-scope="text,record">
                                    <a-checkbox v-model="record.configuration"> </a-checkbox>
                                </template>
                                <template slot="show" slot-scope="text,record">
                                    <a-checkbox v-model="record.show"> </a-checkbox>
                                </template>
<!--                                <template slot="action" slot-scope="text,record">-->
<!--                                    <a-button @click="handleOpen(record)" type="link"> 编辑 </a-button>-->
<!--                                    <a-button type="link" style="color: #F64646;"> 删除 </a-button>-->
<!--                                </template>-->
                            </a-table>
                    </div>
                </a-form-model>
                <div class="flex align-center justify-center">
                    <a-button @click="visible = false"
                        style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px">取消</a-button>
                        <a-button @click="submit" type="primary">确定</a-button>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import {dataSource as ds} from "@/services";
import {addSensor, getSensorsPaging, getSensorsPagings, updateSensors} from "@/services/device";

const columns = [
{
        title: 'ID',
        dataIndex: 'id',
    },
    {
        title: '终端编码',
        dataIndex: 'sensor_code',
    },
    {
        title: '终端名称',
        dataIndex: 'sensor_name',
    },
    {
        title: '终端号码',
        dataIndex: 'sensor_sn',
    },
    {
        title: '终端类型',
        dataIndex: 'sensor_type',
      scopedSlots: { customRender: 'sensor_type' },
    },
    {
        title: '终端型号',
        dataIndex: 'sensor_mode',
    },
    {
        title: '发布主题',
        dataIndex: 'sensor_topic',
    },
    {
        title: '订阅主题',
        dataIndex: 'sensor_subscribe',
    },
    {
        title: '在线状态',
        dataIndex: 'online_status',
        scopedSlots: { customRender: 'online_status' },
    },
    {
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:160
    }
]
const columnsModal = [
    {
        title: '传感器',
        dataIndex: 'sensorName',
        align:'center'
    },
    {
        title: '传感器配置',
        scopedSlots: { customRender: 'configuration' },
        align:'center'
    },
    {
        title: '是否展示',
        scopedSlots: { customRender: 'show' },
        align:'center'
    }
]
export default {
    name: "terminal",
    data() {
        return {
            columns,
            list: [],
          statusList:[{
              id:0,
            name:'离线'
          },{
            id:1,
            name:'在线'
          }],
            selectedRowKeys: [],
            terminalTypeList:[{
              name:'04型-云盒',
              id:'FYH04'
            },{
              name:'05型-云盒',
              id:'FYH05'
            },{
              name:'06型-云盒',
              id:'FYH06'
            }],
            terminalModelList:[],
          publishTopicList:[],
            searchForm: {
                page: 1,
              pageSize: 15,
              sensor_name:'',
              sensor_type:'',
              sensor_mode:'',
              sensor_sn:'',
              online_status:''
            },
            total: 0,
            visible: false,
          loading: false,
            title: '添加终端',
            form: {},
            rules: {
              sensor_name: [
                    { required: true, message: '请输入终端名称', trigger: 'blur' },
                ],
              sensor_sn: [
                    { required: true, message: '请输入终端号码', trigger: 'blur' },
                ],
              sensor_type: [
                    { required: true, message: '请选择终端类型', trigger: 'change' },
                ],
              sensor_mode:[
                { required: true, message: '请选择终端型号', trigger: 'blur' },
                ]
            },
            columnsModal,
            dataSourceModal:[]
        }
    },
  mounted() {
    this.getData();
    this.getTerminalModel();
    this.getPublishTopic();
  },
    methods: {
      //搜索
      search(){
        this.searchForm.page=1;
        //
        if(this.searchForm.sensor_name||this.searchForm.sensor_type||this.searchForm.sensor_mode||this.searchForm.sensor_sn||this.searchForm.online_status!==''){
          let data={
            sensor_name:this.searchForm.sensor_name,
            sensor_type:this.searchForm.sensor_type,
            sensor_mode:this.searchForm.sensor_mode,
            sensor_sn:this.searchForm.sensor_sn,
            online_status:this.searchForm.online_status,
          }
          getSensorsPagings(data).then((res) => {
            this.list = res
            this.total =10
          }).catch(() => {

          });
        }else {
          this.getData()
        }

      },
      //重置
      reset(){
        this.searchForm={
          page: 1,
          pageSize: 15,
          sensor_name:'',
          sensor_type:'',
          sensor_mode:'',
          sensor_sn:'',
          online_status:''
        }
        this.getData()
      },
      //获取终端型号
      getTerminalModel() {
        ds.terminalType({type:2}).then(res => {
          console.log(res)
          this.terminalModelList = res.data.data.list
        })
      },
      //获取发布主题
      getPublishTopic() {
        ds.terminalType({type:3}).then(res => {
          console.log(res)
          this.publishTopicList = res.data.data.list
        })
      },
      //提交
      submit(){
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.form.list=this.dataSourceModal;
            if(this.title=='编辑终端'){

              updateSensors(this.form).then(res => {
                console.log(res)
                this.$message.success('提交成功')
                this.visible=false;
                this.getData()
              })
            }else {
              addSensor(this.form).then(res => {
                console.log(res)
                this.$message.success('提交成功')
                this.visible=false;
                this.getData()
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      getData() {
        // this.list=[]
        let data={
          pageNum: this.searchForm.page,
          pageSize: this.searchForm.pageSize
        }
        this.loading=true;
        getSensorsPaging(data).then((res) => {
          this.loading=false;
          this.list = res.sensorList
          this.total =Number(res.totalPages)*this.searchForm.pageSize
        }).catch(() => {

        });
      },
      //删除
      del(row){
        let that=this;
        let ids='';
        if(!row){
          if(this.selectedRowKeys.length){
            let list=[];
            for(let i in this.selectedRowKeys){
              list.push(this.selectedRowKeys[i].id)
            }
            ids=list.join(',')
          }else {
            that.$message.success('请选择删除项');
            return
          }
        }else {
          ids=row.id
        }

        this.$confirm({
          content: '是否确定删除',
          onOk() {
            ds.delpost({ ids:ids }).then(res => {
              console.log(res)
              that.$message.success('删除成功');
              that.getData();
            })
          }
        });
      },
        handleOpen(row) {
            console.log(row)
          //
          this.title = row ? '编辑终端' : '添加终端'
          if(row){
            // this.$refs.ruleForm.resetFields();
            this.form = row;
            this.dataSourceModal =[];
            this.visible = true
          }else {
            this.form={}
            // this.$refs.ruleForm.reset();
            ds.terminalType({type:4}).then(res => {
              console.log(res)
              this.dataSourceModal = res.data.data.list;
              this.visible = true
            })

          }


        },
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        showSizeChange(current, pageSize) {
            this.searchForm.pageSize = pageSize
          this.getData();
        },
        handlePageNo(current) {
            this.searchForm.page = current
          this.getData();
        },
    }
}
</script>
<style scoped lang="less">
.container .searchForm /deep/.ant-select-selection{
  color: #000 !important;
}
/deep/.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/ .ant-pagination-item {
    background-color: #42487A;
    border-color: #999da0;

}

/deep/ .ant-pagination-item a {
    color: #898a94;
}

/deep/ .ant-pagination-item-active {
    border-color: #fff;
}

/deep/ .ant-pagination-item-active a {
    color: #fff;
}

/deep/ .ant-select-selection {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

.modalcss {
    /deep/ .ant-table {
        color: #CFD2E8;
    }
   /deep/ .ant-table-thead > tr > th{
        color: #CFD2E8;
        background: #6D7090 !important;
        border-bottom: 1px solid #7D81A6;
    }
    /deep/ .ant-table-tbody > tr > td{
    background-color: #5C5F7D !important;
    border-bottom: 1px solid #7D81A6 !important;
    }
    /deep/ .ant-table-bordered .ant-table-thead > tr > th,  /deep/ .ant-table-bordered .ant-table-tbody > tr > td{
        border-right: 1px solid #7D81A6 !important;
    }
    /deep/ .ant-table-bordered .ant-table-header > table, /deep/ .ant-table-bordered .ant-table-body > table,/deep/ .ant-table-bordered .ant-table-fixed-left table,/deep/ .ant-table-bordered .ant-table-fixed-right table{
        // border: 1px solid #7D81A6;
        border-color: #7D81A6;
        border-right: none;
        border-bottom: none;
    }
    //
}
</style>
